<template>
  <div>
    <template>
      <el-table
        border
        :data="tableData"
        style="width: 100%"
        ref="cTable"
      >
        <el-table-column label="昵称" prop="nickName" align="center">
          <template slot-scope="scope">
            <div>
              <span>{{scope.row.nickName}}</span>
              <span class="author" v-if="scope.row.isAuthor==1">作者</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="评论内容" prop="content" align="center"></el-table-column>
        <el-table-column label="评论时间" prop="createTime" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="lookReply(scope.row)">查看回复({{scope.row.sub.length}})</el-button>
            <el-button type="text" class="text-red-btn">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table border :data="scope.row.sub" style="width: 100%">
              <el-table-column label="昵称" prop="nickName" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.byAiteName">
                    <span class="text-blue">{{scope.row.nickName}}</span>
                    <span class="author" v-if="scope.row.isAuthor==1">作者</span>
                    <span class="text-reply">回复</span>
                    <span class="text-blue">{{scope.row.byAiteName}}</span>
                    <span class="author" v-if="scope.row.byAiteIsAuthor==1">作者</span>
                  </div>
                  <span v-else>{{scope.row.nickName}}</span>
                </template>
              </el-table-column>
              <el-table-column label="评论内容" prop="content" align="center"></el-table-column>
              <el-table-column label="评论时间" prop="createTime" align="center"></el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button type="text" class="text-red-btn">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
  import {getCommentList} from "../../assets/api/getData";

  export default {
    name: "comment",
    data() {
      return {
        blogId: null,
        tableData: [],
      }
    },
    created() {
      this.blogId = this.$route.query.id;
      this.getList();
    },
    methods: {
      async getList() {
        let res = await getCommentList(this.blogId);
        this.tableData = res.data;
      },
      lookReply(row) {
        const $table = this.$refs.cTable;
        $table.toggleRowExpansion(row);
        $table.toggleRowSelection(row);
      }
    }
  }
</script>

<style lang="less" scoped>
  .author {
    padding: 1px 3px;
    background-color: @color-blue;
    border-radius: 2px;
    font-size: 12px;
    color: #fff;
    margin-left: 5px;
  }

  .text-reply {
    margin: 0 10px;
    color: @color-gray;
  }
</style>
<style lang="less">
  .el-table__expand-column .cell {
    display: none;
  }
</style>
